<!DOCTYPE html>
<html lang="en">
<!-- <head>
  <meta charset="UTF-8">
  <title>Login Page</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css"> 
  <script type="text/javascript" src="/static/vue.js"></script> 
  <script type="text/javascript" src="/static/element_ui.js"></script>
  <script type="text/javascript" src="/static/axios.min.js"></script>  
</head> -->
<head>
  <meta charset="UTF-8">
  <title>IP地址管理</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
  <div id="app">
    <el-form ref="loginForm" :model="loginForm" label-width="60px" class="login-form">
      <el-form-item label="用户名" style="padding-top: 20px;">
        <el-input  v-model="loginForm.username" autocomplete="off" @keydown.native.enter="handleLogin"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" 
        v-model="loginForm.password" 
        autocomplete="off" 
        @keydown.native.enter="handleLogin"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin" style="float: right;">登录</el-button>
      </el-form-item>
    </el-form>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          loginForm: {
            username: '',
            password: ''
          },
          loginVisible: false // 由于不再使用弹窗，这个变量不再需要
        };
      },
      methods: {
        handleLogin() {
          axios.post('/index/getlogin', this.loginForm)
            .then(response => {
              console.log(response);
              if(response.data.status == 'success'){
                let username = response.data.username;
                let password = response.data.password;
                console.log(response);
                this.setLoginData(username, password);
                // localStorage.setItem('username', username); 
                // localStorage.setItem('password', password); 
                //window.location.href = 'http://192.168.200.57:8088/index.php'; 
                //window.location.href = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port + '/index.php'; 
                window.location.href = '/index/home'; 
              }else{
                this.$message.error('登录失败，请检查用户名和密码是否正确');
                 
              } 
            })
            .catch(error => {
              console.error('登录失败:', error);
              this.$message.error('登录失败，请检查用户名和密码是否正确');
            });
        },
        setLoginData(username, password) {
          const expires = new Date();
          expires.setHours(expires.getHours() + 6); // 设置过期时间为当前时间后的6小时

          localStorage.setItem('username', username);
          localStorage.setItem('password', password);
          localStorage.setItem('expires', expires.getTime().toString()); // 将过期时间存储为字符串
        },
        resetLoginData() {
              localStorage.removeItem('username');
              localStorage.removeItem('password');
              localStorage.removeItem('expires'); 
        },
      },
      mounted() {
        this.resetLoginData();
      }
    });
  </script>

  <style scoped>
    /* body {
      background-image: url('/static/background.jpg');  
      background-size: cover;  
      background-position: center;  
      background-repeat: no-repeat;  
    } */
    .login-form {
      width: 300px;
      margin: 300px auto;
      background: rgba(255, 255, 255, 0.8);  
      padding: 20px;
      border-radius: 5px; /* 圆角边框 */
    }
  </style>
</body>
</html>